<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能诊疗预约平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
<main>
    <!-- 医生团队 -->
    <section id="doctors" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">专家团队</h2>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    我们拥有一支经验丰富、专业精湛的医疗团队，致力于为您提供最优质的医疗服务。
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 医生卡片 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="relative">
                        <img src="https://picsum.photos/400/300?random=2" alt="张医生" class="w-full h-64 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <h3 class="text-white font-semibold text-xl">张医生</h3>
                            <p class="text-white/80 text-sm">心内科 | 主任医师</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star-half-o text-yellow-400"></i>
                            </div>
                            <span class="ml-2 text-gray-600 text-sm">4.8 (120评价)</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            从事心血管临床工作20余年，擅长冠心病、心力衰竭、心律失常等疾病的诊断与治疗，曾发表学术论文30余篇。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">冠心病</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">心力衰竭</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">心律失常</span>
                        </div>
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            预约挂号
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="relative">
                        <img src="https://picsum.photos/400/300?random=3" alt="李医生" class="w-full h-64 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <h3 class="text-white font-semibold text-xl">李医生</h3>
                            <p class="text-white/80 text-sm">呼吸科 | 副主任医师</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star-o text-yellow-400"></i>
                            </div>
                            <span class="ml-2 text-gray-600 text-sm">4.2 (98评价)</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            专注于呼吸系统疾病的诊治，特别是慢性阻塞性肺疾病、哮喘和肺部感染性疾病，具有丰富的临床经验和科研能力。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">COPD</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">哮喘</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">肺炎</span>
                        </div>
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            预约挂号
                        </button>
                    </div>
                </div>

                <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="relative">
                        <img src="https://picsum.photos/400/300?random=4" alt="王医生" class="w-full h-64 object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                            <h3 class="text-white font-semibold text-xl">王医生</h3>
                            <p class="text-white/80 text-sm">消化科 | 主任医师</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                                <i class="fa fa-star text-yellow-400"></i>
                            </div>
                            <span class="ml-2 text-gray-600 text-sm">4.9 (156评价)</span>
                        </div>
                        <p class="text-gray-600 mb-4">
                            消化系统疾病专家，尤其擅长胃肠镜检查与治疗、肝胆胰疾病的诊治，在炎症性肠病方面有深入研究。
                        </p>
                        <div class="flex flex-wrap gap-2 mb-6">
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">胃肠镜</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">肝炎</span>
                            <span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">胰腺炎</span>
                        </div>
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            预约挂号
                        </button>
                    </div>
                </div>
            </div>

            <div class="mt-10 text-center">
                <button class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
                    查看全部医生 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
        </div>
    </section>
</main>


</body>
</html>